<template>
  <div class="activity">
    <page-header title="科教链课程研发中心 "></page-header> 
    <scroll class="content" ref="scroll">
      <div>
        <search @search="_search"></search>
        <div class="banner-wrapper">
          <div class="organization-title"><img src="../../assets/image/case_title_1.png"></div>
          <swiper class="banner-swiper" :options="swiperOption" v-if="banner && banner.length">
            <swiper-slide class="banner-swiper-item" v-for="(item, index) in banner" :key="index">
              <div class="banner-item" @click="_turnActive(item)">
                <div class="img"><img :src="item.img"></div>
                <div class="bottom">
                    <p>{{item.title}}</p>	
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <nav-list></nav-list>
        <div class="case">
        	<div class="organization-title"><img src="../../assets/image/case_title_2.png"></div>
        	<ul>
        		<li v-for="(item, index) in cases" :key="index" @click="_turnCase(item)">
        			<div class="img"><img :src="item.img"></div>
        			<div class="bottom">
        				<p class="title">{{item.title}}</p>
        				<div class="info">
        					<p>{{item.name}}</p>
        					<p>{{item.add}}</p>
        				</div>
        			</div>
        			<div class="type">{{item.type}}</div>
        		</li>
        	</ul>
        </div>
        <div class="literacy">
        	<div class="organization-title"><img src="../../assets/image/case_title_3.png"></div>
        	<ul>
        		<li v-for="(item, index) in literacy" :key="index"  
        		:class="{'active': literacyActive === index}" @click="literacyActive = index">
        			<span>{{item}}</span>
        		</li>
        	</ul>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Search from 'components/search'
import Scroll from 'components/scroll/scroll'
import NavList from 'components/nav-list'
import Countdown from 'components/countdown'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    PageHeader,
    Search,
    Scroll,
    NavList,
    Countdown,
    swiperSlide,
    swiper
  },
  data () {
    return {
      banner: [],
      type: '',
      text: '',
      cases: [],
      literacy: [],
      literacyActive: 0,
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 15
      }
    }
  },
  created() {
    // this._initData()
    this._initBanner()
    this._initCase()
    this._initLiteracy()
  },
  methods: {
    _search(val, type) {
      this.text = val
      this.type = type
    },
    _initBanner() {
      let response = [{
        id: 'z01',
        title: '杭州市首届科技教师联谊活动',
        img: '/static/banner/banner_7.png'
      }, {
        id: 'z01',
        title: '杭州市首届科技教师联谊活动',
        img: '/static/banner/banner_7.png'
      }, {
        id: 'z01',
        title: '杭州市首届科技教师联谊活动',
        img: '/static/banner/banner_7.png'
      }]
      this.banner = response
    },
    _initCase() {
      let response = [{
        id: 'z01',
        title: '生态系统大概念',
        img: '/static/banner/banner_8.png',
        name: '“北京的候鸟”立体书制作',
        add: '中国动物馆',
        type: '专注力'
      }, {
        id: 'z02',
        title: '“人与自然”大概念',
        img: '/static/banner/banner_9.png',
        name: '大航海时代',
        add: '航海博物馆',
        type: '好奇心'
      }, {
        id: 'z01',
        title: '生态系统大概念',
        img: '/static/banner/banner_8.png',
        name: '“北京的候鸟”立体书制作',
        add: '中国动物馆',
        type: '专注力'
      }, {
        id: 'z02',
        title: '“人与自然”大概念',
        img: '/static/banner/banner_9.png',
        name: '大航海时代',
        add: '航海博物馆',
        type: '好奇心'
      }, {
        id: 'z01',
        title: '生态系统大概念',
        img: '/static/banner/banner_8.png',
        name: '“北京的候鸟”立体书制作',
        add: '中国动物馆',
        type: '专注力'
      }, {
        id: 'z02',
        title: '“人与自然”大概念',
        img: '/static/banner/banner_9.png',
        name: '大航海时代',
        add: '航海博物馆',
        type: '好奇心'
      }]
      this.cases = response
    },
    _initLiteracy() {
        let response = ['STEAM', '自然教育', '创客教育', '木工课', '传统文化', '公民科学']
        this.literacy = response
    },
    _turn(item) {
      this.$router.push({
        path: `/personal/activity/detail${item.id}`
      })
    },
    _turnActive(item) {
      console.log('最新动态')
    },
    _turnCase(item) {
      console.log('课前预习')
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .activity{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .content{
      position: relative;
      height:calc(~"100% - 84px");
      overflow: hidden;
      &::after {
        position: absolute;
        display: none;
        content: '';
        top: 10px;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        background: url('../../assets/image/loading.gif') no-repeat center / 40px auto;
      }
      .organization-title{
      	img{
      		margin-top: 6px;
      		width: auto;
      		height: 30px;
      	}
      	height: 42px;
      	background:url('../../assets/image/case_bg.png') no-repeat right 10px center / auto 42px;
      	margin-bottom: 20px;
      }
      .banner-wrapper{
        width: 100%;
        box-sizing: border-box;
        padding: 20px 15px; 
        background-color: #fff;
        margin: 20px 0;
        .banner-swiper{
          font-size: 0;
          height: 100%;
          .banner-swiper-item{
            display: inline-block;
            width: 435px;
            height: 220px;
            background-color: #f2f2f2;
            box-shadow: 0px 2px 7px 0px 
              rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            box-sizing: border-box;
            overflow:hidden

          }
        }
        .banner-item{
          position: relative;
          width: 100%;
          height: 220px;
          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: auto;
            }
          }
          .bottom{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 46px;
            background-color: rgba(0, 0, 40, 0.9);
            display:flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20px;
            p {
            	font-size: 20px;
				line-height: 46px;
				color: #ffffff;
            }
          }
        } 
      }
      .case{
      	margin-top: 20px;
      	padding: 20px 0 40px;
      	background-color: #fff;
      	.organization-title{
      		padding-left: 15px;
      	}
      	ul{
      		width: 100%;
      		box-sizing: border-box;
      		padding: 0 15px;
      		display:flex;
      		flex-wrap: wrap;
      		li{
      			position: relative;
      			width:calc(~"50% - 10px");
      			margin-top: 20px;
      			&:nth-child(2n) {
      				margin-left: 20px;
      			}
      			height: 240px;
				background-color: #004962;
				box-shadow: 1px 2px 7px 0px 
					rgba(0, 0, 0, 0.2);
				border-radius: 8px;
				overflow:hidden;
				.img{
					width: 100%;
					height: 100%;
					overflow:hidden;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.type{
					position: absolute;
					left: 0;
					top: 0;
					width: 80px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					font-size: 18px;
					color: #fff;
					background-color: #e54228;
				}
				.bottom{
					position: absolute;
					width: 100%;
					bottom: 0;
					left: 0;
					.title{
						display: block;
						width: 100%;
						height: 28px;
						background-color: rgba(229,66,40,0.7);
						font-size: 18px;
						text-align: center;
						line-height: 28px;
						color: #ffffff;
					}
					.info {
						display:flex;
						flex-direction: column;
    					justify-content: space-around;
    					background-color: rgba(0,0,40,0.9);
    					height:74px;
						p{
							padding-left: 16px;
							font-size: 18px;
							color: #ffffff;
							&::before {
								margin-right: 14px;
								content: '';
								display: inline-block;
								width: 16px;
								height: 18px;
								background: url('../../assets/image/icon_or_1.png') no-repeat center / 16px 18px;
							}
						}
						p:nth-child(2) {
							&::before {
								margin-right: 14px;
								content: '';
								display: inline-block;
								width: 17px;
								height: 16px;
								background: url('../../assets/image/icon_or_2.png') no-repeat center / 17px 16px;
							}
						}
					}
				}
      		}
      	}
      }
      .literacy{
      	margin-top: 20px;
      	padding: 20px 0;
      	background-color: #fff;
      	.organization-title{
      		padding-left: 15px;
      	}
      	ul{
      		width: 100%;
      		box-sizing: border-box;
      		display:flex;
      		flex-wrap: wrap;
      		li{
      			width: 25%;
      			display:flex;
      			justify-content: center;
      			align-items: center;
      			margin: 13px 0;
      			span{
      				box-sizing: border-box;
	      			width: 126px;
					height: 45px;
					border-radius: 8px;
					border: solid 1px #cccccc;
					font-size: 22px;
					color: #565a70;
					text-align: center;
					line-height: 45px;
      			}
      			
				&.active{
					span{
						border: none;
						background-image: linear-gradient(180deg, 
						#00c6fb 0%, 
						#0091f3 50%, 
						#005bea 100%);
						color: #fff;
					}	
				}
      		}
      	}
      }
    }
    .content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
